<template>
  <svg class="svg-icon icon" :width="props.size" :height="props.size" :style="getStyle">
    <use :href="`#svg-icon-${props.name}`" />
  </svg>
</template>
<script setup lang="ts">
import { computed, type CSSProperties } from 'vue';

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [Number, String],
    default: 20
  },
  color: {
    type: String,
    default: ''
  }
});

defineOptions({
  name: 'SvgIcon'
});

const getStyle = computed((): CSSProperties => {
  if (props.color === '') {
    return {};
  } else {
    return {
      color: props.color
    };
  }
});
</script>
<style scoped>
.svg-icon {
  fill: currentColor;
  overflow: hidden;
  vertical-align: middle;
}
</style>
